<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <head th:include="common::commonHeader"></head>
    <link rel="stylesheet" th:href="@{/css/main.css}">
    <link rel="stylesheet" th:href="@{/css/pagination.css}">
    <script th:src="@{/jquery/jquery-2.1.1.min.js}"></script>
    <script th:src="@{/jquery/jquery.pagination.js}"></script>
    <script th:src="@{/crowd/my-role.js}"></script>
    <link rel="stylesheet" th:href="@{/ztree/zTreeStyle.css}">
    <script>
        $(function () {
            //1. 准备初始化数据
            window.pageNum = 1;
            window.pageSize = 5;
            window.keyword = "";
            //执行分页  my-role.js
            generatePage();


            //给查询绑定单击函数
            $("#searchBtn").click(function () {
                //获取关键词
                window.keyword = $("#keywordInput").val();
                generatePage();
            });


            //点击新增按钮打开模态框
            $("#showModelBtn").click(function () {
                $("#addModel").modal("show");
            });


            //给模块框的保存按钮添加事件
            $("#saveRoleBtn").click(function () {
                //获取文本框中的名称  利用后来元素
                var roleName = $.trim($("#addModel [name=roleName]").val());
                //发送ajax请求
                $.ajax({
                    url:"/role/save",
                    type:"post",
                    data:{
                        "name":roleName
                    },
                    dataType:"json",
                    success:function (response) {
                        var result = response.result;
                        if (result=="SUCCESS"){
                            //重新加载分页
                            window.pageNum=99999;
                            generatePage();
                        }if (result=="FAILED"){
                            console.log("操作失败"+response.message);
                        }
                    },
                    error:function (response) {
                        console.log(response.status+" "+response.statusText);
                    }
                });
                //关闭模态框
                $("#addModel").modal("hide");
                //清理模态框
                $("#addModel [name=roleName]").val("");
            });


            //给页面铅笔图标绑定单击响应函数，目的是打开模态框
            //找到动态生成的元素所附着的静态元素
            //on函数的第一个参数是事件类型
            //on函数的第二个参数是找到真正要绑定的事件的元素的选择器
            //第三个参数是事件响应函数
            $("#rolePageBody").on("click",".pencilBtn",function () {
                $("#editModel").modal("show");
                //当前元素的父元素的兄弟元素的值
                var roleName = $(this).parent().prev().text();
                window.roleId = this.id;
                $("#editModel [name=roleName]").val(roleName);
            });
            $("#updateRoleBtn").click(function () {
                //从文本框中获取角色名称
                var name = $("#editModel [name=roleName]").val();
                $.ajax({
                    url: "/role/update",
                    type:"post",
                    data:{
                        "id":window.roleId,
                        "name":name
                    },
                    dataType: "json",
                    success:function (response) {
                        var result = response.result;
                        if (result=="SUCCESS"){
                            //重新加载分页
                            generatePage();
                        }if (result=="FAILED"){
                            console.log("操作失败"+response.message);
                        }
                    },
                    error:function (response) {
                        console.log(response.status+" "+response.statusText);
                    }
                });
                //关闭模态框
                $("#editModel").modal("hide");
            });
            // var roleArray = [{roleId:5,roleName:"eee"},{roleId:4,roleName:"ddd"},{roleId:3,roleName:"ccc"},{roleId:2,roleName:"bbb"},{roleId:1,roleName:"aaa"}];




            //确认删除，将要删除的数据发送给后端
            $("#removeRoleBtn").click(function () {
                //转换成json字符串
                var requestBody = JSON.stringify(window.roleIdArray);
                $.ajax({
                    url:"/role/delete",
                    type:"post",
                    data:requestBody,
                    contentType:"application/json;Charset=UTF-8",
                    dataType:"json",
                    success:function (response) {
                        var result = response.result;
                        if (result=="SUCCESS"){
                            //重新加载分页
                            generatePage();
                        }if (result=="FAILED"){
                            console.log("操作失败"+response.message);
                        }
                    },
                    error:function (response) {
                        console.log(response.status+" "+response.statusText);
                    }
                });
                $("#removeModel").modal("hide");
            });




            //给单条删除的按钮绑定单击响应函数
            $("#rolePageBody").on("click",".removeBtn",function () {
                var name = $(this).parent().prev().text();
                var roleArray = [{
                    roleId:this.id,
                    roleName:name
                }];
                showRemoveModal(roleArray);
            });




            //给总的CheckBox绑定单击响应函数
            $("#summaryBox").click(function () {
                //获取当前多选框自身的状态
                var currentStatus = this.checked;
                //把其它多选框的状态也改为总的状态
                $(".itemBox").prop("checked",currentStatus);
            });



            //全选的反向操作，当没有全选时，取消总的勾选
            $("#rolePageBody").on("click",".itemBox",function () {
                //获取当前已经选中的.itemBox的数量
                var checkedBoxCount = $(".itemBox:checked").length;
                //获取全部idem的数量
                var totalBoxCount = $(".itemBox").length;
                $("#summaryBox").prop("checked",checkedBoxCount==totalBoxCount);
            });


            //给批量删除绑定单击响应函数
            $("#batchRemoveBtn").click(function () {
                var roleArray = [];
                //遍历当前选中的多选框
                $(".itemBox:checked").each(function () {
                    //拿到id
                    var roleId = this.id;
                    //拿到名称
                    var roleName = $(this).parent().next().text();
                    roleArray.push({
                        "roleId":roleId,
                        "roleName":roleName
                    });
                });
                //检查数组长度，没有就不删除
                if (roleArray.length==0){
                    console.log("请至少选择一个删除");
                    return;
                }
                //打开模块框
                showRemoveModal(roleArray);
            });



            //给分配权限按钮绑定单击响应函数
            $("#rolePageBody").on("click",".checkBtn",function () {
                //把当前角色id存入全局变量
                window.roleId = this.id;
                $("#assignModal").modal("show");
                fillAuthTree();
            });
            //分配按钮单击响应函数
            $("#assignBtn").click(function () {
                var ztreeObj = $.fn.zTree.getZTreeObj("authTreeDemo");
                //收集被勾选的各个节点
                var authIdArray = [];
                //获取全部被勾选的结点
                var checkedNodes = ztreeObj.getCheckedNodes();
                for (var i = 0 ; i < checkedNodes.length;i++){
                    var checkedNode = checkedNodes[i];
                    var authId = checkedNode.id;
                    authIdArray.push(authId);
                }
                //发送请求保存分配
                var requestBody = {
                    "authIdArray":authIdArray,
                    "roleId":[window.roleId]
                };
                requestBody = JSON.stringify(requestBody);

                $.ajax({
                    url:"/role/saveAuth",
                    type:"post",
                    data:requestBody,
                    contentType:"application/json;Charset=UTF-8",
                    dataType:"json",
                    success:function (response) {
                        var result = response.result;
                        if (result=="SUCCESS"){

                        }if (result=="FAILED"){
                            console.log("操作失败"+response.message);
                        }
                    },
                    error:function (response) {
                        console.log(response.status+" "+response.statusText);
                    }
                });
                $("#assignModal").modal("hide");
            });



        });
    </script>
    <style>
        .tree li {
            list-style-type: none;
            cursor:pointer;
        }
        table tbody tr:nth-child(odd){background:#F4F4F4;}
        table tbody td:nth-child(even){color:#C00;}
    </style>
</head>

<body>

<div th:replace="main-common::main-body-header"></div>

<div class="container-fluid">
    <div class="row">
        <div th:replace="main-common::main-body-ul"></div>
        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title"><i class="glyphicon glyphicon-th"></i> 数据列表</h3>
                </div>
                <div class="panel-body">
                    <form class="form-inline" role="form" style="float:left;">
                        <div class="form-group has-feedback">
                            <div class="input-group">
                                <div class="input-group-addon">查询条件</div>
                                <input id="keywordInput" class="form-control has-success" type="text" placeholder="请输入查询条件">
                            </div>
                        </div>
                        <button id="searchBtn" type="button" class="btn btn-warning"><i class="glyphicon glyphicon-search"></i> 查询</button>
                    </form>
                    <button id="batchRemoveBtn" type="button" class="btn btn-danger" style="float:right;margin-left:10px;"><i class=" glyphicon glyphicon-remove"></i> 删除</button>
                    <button id="showModelBtn" type="button" class="btn btn-primary" style="float:right;"><i class="glyphicon glyphicon-plus">
                    </i> 新增</button>
                    <br>
                    <hr style="clear:both;">
                    <div class="table-responsive">
                        <table class="table  table-bordered">
                            <thead>
                            <tr >
                                <th width="30">#</th>
                                <th width="30"><input id="summaryBox" type="checkbox"></th>
                                <th>名称</th>
                                <th width="100">操作</th>
                            </tr>
                            </thead>
                            <tbody id="rolePageBody"></tbody>
                            <tfoot>
                            <tr>
                                <td colspan="6" align="center">
                                    <div id="Pagination" class="pagination"></div>
                                </td>
                            </tr>

                            </tfoot>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div th:replace="role-add::model"></div>
<div th:replace="role-edit::model"></div>
<div th:replace="role-remove::model"></div>
<div th:replace="assignRole-auth::model"></div>

<script th:src="@{/bootstrap/js/bootstrap.min.js}"></script>
<script th:src="@{/script/docs.min.js}"></script>
<script th:src="@{/ztree/jquery.ztree.all-3.5.min.js}"></script>
<script type="text/javascript">
    $(function () {

        $(".list-group-item").click(function(){
            if ( $(this).find("ul") ) {
                $(this).toggleClass("tree-closed");
                if ( $(this).hasClass("tree-closed") ) {
                    $("ul", this).hide("fast");
                } else {
                    $("ul", this).show("fast");
                }
            }
        });
    });

    $("tbody .btn-success").click(function(){
        window.location.href = "assignPermission.html";
    });
</script>
</body>
</html>
